<template>
  <!--互动按钮组件 竖屏和横屏公用组件-->
  <div class="right-box">
    <!-- 答题模块 -->
    <div class="answer-wrap" v-if="answerWrapShow">
      <div class="close-answer-wrap" @click="closeAnswer">
        <Iconfont iconClass="cha1" />
      </div>
      <!-- 答题中  -->
      <div class="answer-wrap-ing" v-if="answerWrapState === '0'">
        <div class="a-w-i-question">
          <cube-scroll :options="scrollOptions">
            <!-- <div class="a-w-i-head">{{ answerWrapTitle }}</div> -->
            <div class="result-head">
              <div v-if="isShowYinSi" class="yinsi" @click="seeYinsi">
                <img src="@/assets/images/zxjt/shuoming.png" alt="">
                <span>隐私政策</span>
              </div>
              <span>{{ answerWrapTitle }}</span>
            </div>
            <div class="center-ans">
              <div v-if="phoneIsRequired" class="phoneBlock">
                <div>手机号码：</div>
                <input id="dati_shoujihao" class="binding-form-mobile" type="number" maxlength="16" ref="mobileInput"
                  v-model="mobileD" placeholder="填写手机号，参与互动抽奖" />
              </div>
              <div class="question-item" v-for="(q, key) in answerIngArr" ref="answerListRef" :key="key">
                <div>
                  <span class="question-id">{{ key | addOne }}/{{ answerIngArr.length }}</span>
                  {{ q.qContent }}
                  <span
                    v-if="   q.qType === '2' && q.qOptionNum != 0 && (rightListClickType === 3 || rightListClickType === 4) ">（多选，最多选{{ q.qOptionNum }}项）</span>
                  <span v-else>{{ typeTextObj[q.qType] }}</span>
                </div>
                <ul v-if="q.qType === '1'">
                  <li v-for="(item, index) in q.answerList" :key="index">
                    <input id="dati_duoxuan_1" type="radio" :id="'choice' + index + '_' + key" :value="item.answerId"
                      v-model="formDataD[q.questionId]" :checked="item.isChecked" />
                    <label :for="'choice' + index + '_' + key">
                      <span class="qi-options">{{ item.seqCode }}</span>
                      <span class="qi-text">{{ item.qAnswer }}</span>
                      <Iconfont v-if="item.answerId === formDataD[q.questionId]" iconClass="duigou1 qi-icon" />
                    </label>
                  </li>
                </ul>
                <ul v-if="q.qType === '2'">
                  <li v-for="(item, index) in q.answerList" :key="index">
                    <span :class="{
                        isChecked: checkedArrD[key].Listids.indexOf(index) >= 0,
                        label: true
                      }" @click="
                        checkLabel(
                          index,
                          q.questionId,
                          item.answerId,
                          q.qType,
                          key,
                          q.qOptionNum
                        )
                      ">
                      <span class="qi-options">{{ item.seqCode }}</span>
                      <span class="qi-text">{{ item.qAnswer }}</span>
                      <Iconfont v-show="checkedArrD[key].Listids.indexOf(index) >= 0" iconClass="duigou1 qi-icon" />
                    </span>
                  </li>
                </ul>
                <div v-if="q.qType === '3'">
                  <input id="dati_xuan_3" class="filling-wrap" type="text" @blur="blurRu"
                    v-model="formDataD[q.questionId]" />
                </div>
              </div>
              <div class="answer-error-wrap">
                <div v-show="errorShowD" class="answer-error">
                  <Iconfont iconClass="gantanhao1" /> {{ answerErrorText }}
                </div>
              </div>
              <button id="dati_tijiao" class="answer-button" @click="submitAnswer" :disabled="submitDisable">
                提交
              </button>
            </div>
          </cube-scroll>
        </div>
      </div>

      <!-- 答案多题的时候 显示答案了-->
      <div class="result" v-if="answerWrapState === '1'">
        <cube-scroll :options="scrollOptions">
          <ul class="result-item">
            <li v-for="(item, index) in answerResultArr" :key="index">
              <div class="result-item-head">
                {{ index | addOne }}/{{ answerResultArr.length }} {{ item.qContent }}
              </div>
              <div class="result-item-text">
                <div class="result-item-text-left">正确答案：</div>
                <div class="result-item-text-right">
                  <div v-for="(itemAnswer, i) in item.rightAnswerList" :key="i">
                    <div v-if="item.qType === '3'">
                      {{ itemAnswer.qAnswer }}
                    </div>
                    <div v-else>
                      <span>{{ itemAnswer.seqCode }}</span>
                      <span>{{ itemAnswer.qAnswer }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll>
      </div>

      <!-- 答案一题的时候显示答案 -->
      <div class="result" v-if="answerWrapState === '2'">
        <cube-scroll :options="scrollOptions">
          <div class="prompt" v-for="(item, index) in answerResultArr" :key="index">
            <Iconfont :iconClass="resultTypeD ? 'duigou1' : 'cuowu'" />
            <p v-if="resultTypeD">恭喜你，答对了</p>
            <div v-else>
              <div class="prompt-error">对不起，答错了</div>
              <div class="oneAnswer">
                <p>正确答案：</p>
                <p v-for="(itemAnswer, i) in item.rightAnswerList" :key="i">
                  <template v-if="item.qType!=3">
                    {{ itemAnswer.seqCode }}
                  </template>
                  {{ itemAnswer.qAnswer }}
                </p>
              </div>
            </div>
          </div>
        </cube-scroll>
      </div>

      <!-- 投票结果-->
      <div class="result vote" v-if="answerWrapState === '4'">
        <cube-scroll :options="scrollOptions">
          <div class="result-head">
            <div isShowYinSi class="yinsi" @click="seeYinsi">
              <img src="@/assets/images/zxjt/shuoming.png" alt="">
              <span>隐私政策</span>
            </div>
            <span>投票结果</span>
          </div>
          <ul class="result-item">
            <li v-for="(item, index) in voteArr" :key="index">
              <div class="result-item-head">
                {{ index | addOne }}/{{ voteArr.length }}. {{ item.qContent }}
              </div>
              <div class="result-item-text">
                <div class="voteItem" v-for="(q, key) in item.rightAnswerList" :key="key">
                  <div>{{ q.qAnswer }}</div>
                  <div class="voteItem-p-wrap">
                    <div class="progress">
                      <div class="bar" :style="'width:' + q.votePercent"></div>
                    </div>
                    <div>{{ q.votePercent }}</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll>
      </div>

    </div>

  </div>
</template>

<script>
  import config from "../../../config"
  import fun from "../../../util/function";
  import {
    removeByValue
  } from "../../../util/util.js";


  export default {
    props: {
      roomInfo: {},
    },
    components: {
    },
    filters: {
      addOne: function(value) {
        return value + 1;
      }
    },
    watch: {
    },
    data() {
      return {
        roomId: this.$route.params.roomid, //房间id
        errorShowD: false, //答题错误提示
        answerWrapShow: false, //答题模块
        answerIngArr: [],
        submitDisable: false,
        formDataD: {}, //答题提交数据
        mobileD: "", // 手机号
        timeD: 60, // 发送验证码倒计时
        sendMsgDisabled: false, //倒计时按钮禁用
        codeInterval: null, //发送验证码定时器,
        checkedArrD: [], //多选
        answerWrapState: "0", //答题模块的 步骤
        answerResultArr: [], //答案多题的时候
        answerResultOne: [], //答案一题的时候
        answerWrapTitle: "", //答题弹框里面标题
        answerErrorText: "", //答题弹框里面错误提示文字
        iconNameAnswer: "cuowu", //icon
        resultTypeD: false, //答案是否正确
        rightList: [], //右侧悬浮列
        qaTypetoBetext: {
          //code转成文本显示出来

          "1": "答题",
          "2": "邀请",
          "3": "问卷",
          "4": "投票",
          "5": "红包",
          "6": "",
        },
        qaTypeId: { // zyzq埋点需要
          "1": "zhibo_dati",
          "2": "zhibo_yaoqing2",
          "3": "zhibo_wenguan",
          "4": "zhibo_toupiao",
          "5": "zhibo_hongbao",
          "6": "zhibo_baoming",
        },
        retD: {
          "1": "答题",
          "3": "问卷",
          "4": "投票",
          "5": "红包",
        },
        typeTextObj: {
          //code转成文本显示出来
          "1": "（单选）",
          "2": "（多选）",
          "3": "（填空）"
        },
        rightListClickType: null, //右侧悬浮列点击的type
        phoneIsRequired: false, //手机号是否显示
        voteIsRequired: false, //投票结果是否显示
        voteArr: [], //投票结果数组
        codePickerShow: false,
        submitInfoId: "",
        stringUserAnswer: "", //客户提交前的答案 数组转字符串格式的
        activityTitle: '', //活动标题
        transitionStyle: '0.3s height ease-in-out',
        oldQaTab:[],
        newQaTab:[],
        getPlatform:fun.getPlatform(),
        isShowYinSi:true,//是否展示隐私政策
      };
    },
    computed: {
    },
    created() {  
      if(this.$channel == 'zxjtqh'){
        if(this.getPlatform!='wx'){
            this.isShowYinSi = false //中信建投期货 只有微信展示
        }
      };
    },
    mounted() {
      //console.log(this.roomInfo.qaTab,'roomInfo.qaTab')

    },
    methods: {
      seeYinsi(){
        this.$parent.isPrivacy = true;
      },
      //打开的弹框-答题，投票等 里面的第一步提交
      answerFormPost(infoId, type) {
        this.errorShowD = false;
        let that = this
        let userAnswerList = []; //答案的集合
        let m = this.answerIngArr.length; //题目总长度
        let formKey = Object.keys(this.formDataD);

        if (!Object.values) {
          Object.values = function(obj) {
            if (obj !== Object(obj))
              throw new TypeError("Object.values called on a non-object");
            var val = [],
              key;
            for (key in obj) {
              if (Object.prototype.hasOwnProperty.call(obj, key)) {
                val.push(obj[key]);
              }
            }
            return val;
          };
        }

        let formValue = Object.values(this.formDataD);
        let formPost = []; //单选和填空的集合
        for (let j = 0; j < formKey.length; j++) {
          let tObj = this.answerIngArr.find(
            item => item.questionId === formKey[j]
          );
          let qaType = tObj ? tObj.qType : "";
          formPost = {
            answerContent: [formValue[j]],
            qaType,
            questionId: formKey[j]
          };
          userAnswerList.push(formPost);
        }

        for (let i = 0; i < m; i++) {
          if (this.checkedArrD[i].Listids.length > 0) {
            userAnswerList.push(this.checkedArrD[i]);
          }
        }
        let postData = {
          infoId,
          mobile: this.mobileD,
          userAnswerList
        };

        if (userAnswerList.length > 0 && this.rightListClickType === 1) { //仅仅在答题的时候 存下用户的作答
          this.stringUserAnswer = userAnswerList[0].answerContent
            .sort()
            .toString();
        } else {
          this.stringUserAnswer = ''
        }

        if (this.phoneIsRequired && !this.mobileD) {
          this.errorShowD = true;
          this.answerErrorText = "请填写手机号";
          return false;
        }
        if (userAnswerList.length < m) {
          this.errorShowD = true;
          this.answerErrorText = "请完成题目后再提交";
          return false;
        }

        this.submitDisable = true; //防止重复提交
        //提交答案请求
        this.$http
          .post("/h5live/qa/addQaUserAnswer", postData, {
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            if (res.data.code == "000000") {
              that.getQaAnswer(res.data.data.rightAnswer)
              this.submitDisable = false;
              // 神策打点（（答题 | 问卷 | 投票 | 报名）成功）
              const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
              $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
                page_name: `直播${['预告', '详情'][roomStatus]}页`,
                user_nickname: this.$store.state.userInfo.nickname,
                live_room_id: roomId,
                live_room_name: title,
                live_room_status: ['预告', '直播中'][roomStatus],
                live_room_creator: anchor,
                function_name: ['', '答题', '', '问卷', '投票', '', '报名'][type],
              });
            } else {
              this.answerWrapShow = false;
              fun.toastMessage(res.data.msg, 1500);
              this.submitDisable = false;
            }
          })
          .catch(response => {
            this.submitDisable = false;
            console.log(response);
          });
      },
      submitAnswer() {
        this.answerFormPost(this.submitInfoId, this.rightListClickType);
      },
      //关闭弹框-答题，投票等
      closeAnswer() {
        this.answerWrapShow = false;
      },
      openAnswerFun(id, type) {
        if (id === 0) { //id为0 建好题目没有推送
          fun.toastMessage('未开始', 1500);
          return;
        }
        this.rightListClickType = type;
        this.errorShowD = false;
        this.submitInfoId = id;
        this.getQaInfoDetail(id, type); //获取题目包含所有的接口
      },
      //打开弹框-答题，投票等 由父组件调用
      openAnswer(id, type) {
        // 神策打点（答题 1 问卷 3 投票 4 报名 6）
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `直播${['预告', '详情'][roomStatus]}页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: roomId,
					live_room_name: title,
					live_room_status: ['预告', '直播中'][roomStatus],
					live_room_creator: anchor,
					function_name: ['', '答题', '', '问卷', '投票', '', '报名'][type],
				});
        if (this.$store.state.isYk) {
          let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
          fun.ykDisposeFun(jointUrl)
          return
        }
          this.openAnswerFun(id, type);
      },
      //获取题目
      getQaInfoDetail(id, type) {
        let zbAct = this.roomInfo.roomInfo ? this.roomInfo.roomInfo.anchor : "";
        this.$http
          .get("/h5live/qa/getQaInfoDetail", {
            params: {
              infoId: id,
              qaType: type,
              zbAct
            }
          })
          .then(res => {
            if (res.data.code == "000000") { //拿到了题目
              const {
                wMobile = 0, showResult = 0, questions = []
              } = res.data.data;
              this.answerIngArr = questions; //题目的数组
              for (let key in this.answerIngArr) {
                this.$set(this.checkedArrD, key, {});
                this.$set(this.checkedArrD[key], "answerContent", []);
                this.$set(this.checkedArrD[key], "qaType", "");
                this.$set(this.checkedArrD[key], "questionId", "");
                this.$set(this.checkedArrD[key], "Listids", []);
              }
              this.answerWrapTitle = this.retD[type];
              this.phoneIsRequired = (wMobile === 1 ? true : false);
              this.voteIsRequired = (showResult === 1 ? true : false);
              this.answerWrapState = "0";
              this.answerWrapShow = true;
            } else if (res.data.code == '100022') { //已经互动 那结果
              this.voteIsRequired = (res.data.data.showResult === 1 ? true : false);
              let rightAnswerData = res.data.data.rightAnswer
              if (this.rightListClickType === 1) { //答题
                if (rightAnswerData.length === 1 && this.stringUserAnswer) { //只有在一题的时候并且有缓存作答数据的情况下
                  this.getQaAnswer(rightAnswerData)
                  this.answerWrapShow = true;
                } else {
                  fun.toastMessage(res.data.msg, 1500);
                }

              } else if (res.data.data.showResult && this.rightListClickType === 4) { //投票 并且后台配置了显示答案的时候 显示答案
                this.getQaAnswer(rightAnswerData)
                this.answerWrapShow = true;
              } else { //其它情况下弹msg
                fun.toastMessage(res.data.msg, 1500);
              }

            } else {
              console.log("失败");
              fun.toastMessage(res.data.msg, 1500);
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      //获取答案
      getQaAnswer(data) {
        if (this.rightListClickType === 4) {
          if (this.voteIsRequired) {
            //要显示投票结果
            this.answerWrapTitle = "投票结果";
            this.answerWrapState = "4";
            this.voteArr = data;
          } else {
            //不要显示投票结果
            this.answerWrapShow = false;
            // fun.toastMessage("提交成功", 1500);
          }
        } else if (this.rightListClickType === 3) {
          this.answerWrapShow = false;
          // fun.toastMessage("提交成功", 1500);
        } else if (this.rightListClickType === 1) {
          this.answerWrapTitle = "答案";
          this.answerResultArr = data;
          if (data.length === 1) {
            this.answerWrapState = "2"; //一题的时候
            let hhhDD = data[0].rightAnswerList;
            let mmmDD = hhhDD.map(function(item) {
              if (data[0].qType === '3') {
                return item.qAnswer
              } else {
                return item.answerId;
              }
            });
            if (this.stringUserAnswer === mmmDD.sort().toString()) {
              this.resultTypeD = true;
            } else {
              this.resultTypeD = false;
            }
          } else {
            this.answerWrapState = "1"; //多题的时候
          }
        }
      },
      //多选题的点击
      checkLabel(id, questionId, code, type, index, qOptionNum) {
        // 手机号失去焦点
        if (this.phoneIsRequired) {
          this.$refs.mobileInput.blur();
        }
        let ids = this.checkedArrD[index].Listids.indexOf(id);
        this.checkedArrD[index].qaType = type;
        this.checkedArrD[index].questionId = questionId;
        if (ids >= 0) {
          this.checkedArrD[index].Listids.splice(ids, 1);
          removeByValue(this.checkedArrD[index].answerContent, code);
        } else {
          if (qOptionNum > 0) {
            //有限制最多
            if (this.checkedArrD[index].Listids.length < qOptionNum) {
              this.checkedArrD[index].Listids.push(id);
              this.checkedArrD[index].answerContent.push(code);
            }
          } else {
            //没有限制最多
            this.checkedArrD[index].Listids.push(id);
            this.checkedArrD[index].answerContent.push(code);
          }
        }
      },
      //推送投票答题问卷等等
      pushVote(obj) {
        //开始清空操作
        if (this.$store.state.isYk) {
          return
        }
        this.answerWrapState = "0"; //答题步骤
        this.formDataD = {}; //清空
        this.phoneIsRequired = false; //手机号是否显示
        this.voteIsRequired = false; //投票结果是否显示
        this.openAnswer(obj.infoId, obj.type);
        this.roomInfo.qaTab.map(item => {
          if (item.qaType === obj.type) {
            item.qaInfoId = obj.infoId
          }
        })
      },
      //input 失去焦点  解决ios 最新版本6.7.4 input BUG
      blurRu() {
        setTimeout(function() {
          window.scrollTo(0, 0);
        }, 100);
        this.errorShowD = false;
      },
      //点击或者焦点
      footerInput() {
        this.$refs.footerInputRu.focus();
      },
      clickFocus() {
        // this.$refs.mobileInput.focus()
        let that = this.$refs.mobileInput;
        setTimeout(function() {
          that.scrollIntoViewIfNeeded();
        }, 500);
      },
      // 关闭弹出框
      closePop() {
        this.answerWrapShow = false
      },
      // sheetBeforeEnter(el, done) {
      //   el.style.transition = this.transitionStyle;
      //   if (!el.dataset) el.dataset = {};
      //   el.style.height = 0;
      // },
      // sheetEnter(el, done) {
      //   if (el.scrollHeight !== 0) {
      //     el.style.height = `${el.scrollHeight}px`;
      //   } else {
      //     el.style.height = '';
      //   }
      //   el.style.overflow = 'hidden';
      //   el.style.display = "flex";
      //   el.style.flexDirection = 'column-reverse';
      // },
      // sheetAfterEnter(el, done) {
      //   el.style.transition = '';
      //   el.style.height = '';
      // },
      // sheetBeforeLeave(el, done) {
      //   if (!el.dataset) el.dataset = {};
      //   el.style.height = 0;
      //   el.style.overflow = 'hidden';
      // },
      // sheetLeave(el, done) {
      //   el.style.transition = this.transitionStyle;
      //   if (!el.dataset) el.dataset = {};
      //   el.style.height = 0;
      // },
    },
    watch: {
      //弹窗框是否打开
      answerWrapShow(val, oldVal) {
        if (val) {
          this.$emit('formChildMsg', {
            type: 'showMask',
            data: ''
          })
        } else {
          this.$emit('formChildMsg', {
            type: 'closeAll',
            data: ''
          })
        }
      },
    }
  };
</script>

<style scoped="scoped">
  /* 答题 */
  .answer-wrap {
    width: 100vw;
    max-height: 50vh;
    background: #fff;
    position: fixed;
    bottom: 0;
    border-radius: 20px 20px 0px 0px;
    z-index: 1100;
    box-shadow: 0px 8px 22px #818080;
  }

  .a-w-i-head {
    font-size: 30px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #333;
    text-align: center;
    padding: 26px 0;
  }

  .a-w-i-question {
    padding: 0 30px;
    /* height: calc(100vh - 540px); */
    height: 50vh;
    transform: rotate(0deg);
    overflow: hidden;
    overflow-y: auto;
  }

  .center-ans {
    font-size: 34px;
    margin-bottom: 50px;
  }

  .a-w-i-question .question-id {
    color: #cc2d30;
  }

  .question-item {
    padding-bottom: 4px;
    font-size: 30px;
  }

  .question-item>div {
    line-height: 1.2;
  }

  .a-w-i-question .question-item+.question-item {
    margin-top: 60px;
  }

  .question-item ul {
    padding-left: 45px;
    padding-top: 20px;
  }

  .question-item ul li label,
  .question-item ul li .label {
    background: #f4f4f4;
    width: 600px;
    padding: 20px 40px 20px 30px;
    border-radius: 30px;
    color: #222;
    display: flex;
    word-break: break-all;
    border: 1PX solid #f4f4f4;
    align-items: center;
  }

  .qi-options {
    width: 30px;
    height: 30px;
    line-height: 32px;
    background: #bcbcbc;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    text-align: center;
    display: inline-block;
  }

  .qi-text {
    flex: 1;
    padding: 0 40px;
    display: inline-block;
    font-size: 30px;
  }

  .question-item .qi-icon {
    color: #fe4b52;
    font-size: 28px;
  }

  input[type="radio"] {
    width: 0px;
    height: 0px;
    opacity: 0;
  }

  .question-item ul li {
    margin-top: 30px;
    font-size: 0;
    position: relative;
  }

  .normal-color {
    color: #cc2d30;
  }

  .color {
    color: #d4d4d4;
  }

  .question-item input:checked+label {
    background: #ffeaea;
    border: 1PX solid #ff7479;
    color: #fe4b52;
  }

  .question-item input:checked+label .qi-options {
    background: #fe4b52;
  }

  .question-item li span.isChecked {
    background: #ffeaea;
    border: 1PX solid #ff7479;
    color: #fe4b52;
  }

  .question-item li span.isChecked .qi-options {
    background: #fe4b52;
  }

  .filling-wrap {
    width: 600px;
    height: 88px;
    background: #f1f1f1;
    border-radius: 10px;
    outline: none;
    margin-top: 30px;
    box-sizing: border-box;
    padding: 0 45px;
    margin-left: 45px;
    border: 1px solid #d9d9d9;
  }

  .a-w-i-button {
    width: 250px;
    height: 88px;
    background: rgba(204, 45, 48, 1);
    border-radius: 30px;
    text-align: center;
    line-height: 88px;
    color: #fff;
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
  }

  .close-answer-wrap {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #333;
    width: 100px;
    height: 100px;
    z-index: 101;
  }

  .close-answer-wrap i {
    margin-left: 30px;
    margin-top: 30px;
    display: inline-block;
    font-size: 30px;
  }

  .a-w-i-error {
    width: 600px;
    height: 48px;
    line-height: 48px;
    background: rgba(204, 160, 161, 0.24);
    border-radius: 15px;
    color: #cc2d30;
    position: absolute;
    bottom: 145px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
  }

  .a-w-i-error i {
    font-size: 28px;
    padding: 0 10px 0 30px;
  }

  .result {
    padding: 0 34px;
    overflow: hidden;
    /* height: calc(100vh - 500px); */
    height: 50vh;
    transform: rotate(0deg);
  }

  .result-head {
    padding: 25px 0;
    color: #fe4b52;
    text-align: center;
  }
  .result-head > span{
    margin-left: -50px;
  }
  .result-item {
    color: #0c0c0c;
    margin-top: 30px;
  }

  .result-item li+li {
    margin-top: 50px;
  }

  .result-item-text {
    margin-top: 30px;
    padding-left: 68px;
  }

  .result-item-text-left {
    color: #0c0c0c;
  }

  .result-item-text-right {
    color: #cc2d30;
    margin-left: 10px;
  }

  .prompt {
    margin-top: 92px;
    text-align: center;
  }

  .prompt .icon-duigou1,
  .prompt .icon-cuowu {
    font-size: 140px;
    display: inline-block;
    color: #cc2d30;
    margin-bottom: 40px;
  }

  .prompt i {
    font-size: 140px;
    width: 140px;
    display: block;
    color: #cc2d30;
    margin: 0 auto;
    margin-bottom: 40px;
  }

  .prompt p {
    color: #cc2d30;
    font-size: 32px;
    text-align: center;
  }

  .prompt-error {
    color: #0c0c0c;
    margin-bottom: 30px;
  }

  .oneAnswer {
    text-align: center;
  }

  .oneAnswer p {
    margin-top: 20px;
  }

  /*
.binding-form {
  position: relative;
} */
  /* .binding-form button {
  width: 180px;
  height: 45px;
  font-size: 26px;
  line-height: 1px;
}

.binding-form input {
  width: 100%;
  height: 65px;
  line-height: 65px;
  border: 0;
  border-bottom: 1px solid rgb(210, 210, 210);
  background: #fafafa;
}

.binding-form input.binding-form-mobile {
  padding-left: 125px;
}

.binding-form input + input {
  margin-top: 40px;
  padding-right: 220px;
} */
  /* 投票进度条 */

  .voteItem {
    margin-top: 30px;
  }

  .voteItem-p-wrap>div {
    display: inline-block;
    vertical-align: middle;
  }

  .progress {
    width: 412px;
    overflow: hidden;
    height: 36px;
    margin-bottom: 20px;
    margin-top: 20px;
    background-color: #f7f7f7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 10px;
    margin-right: 46px;
  }

  .progress .bar {
    width: 0%;
    height: 100%;
    color: #ffffff;
    float: left;
    font-size: 12px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #FE4B52;
  }

  .dialogSuspension-text {
    text-align: center;
    padding-top: 80px;
    color: #0c0c0c;
    font-size: 28px;
  }

  .internationalCode {
    color: #cc2d30;
    position: absolute;
    height: 65px;
    line-height: 65px;
    width: 100px;
  }

  .fillInPhoneBox ul {
    width: 90%;
    height: auto;
    margin: 0 auto;
    font-size: 32px;
    color: #0c0c0c;
  }

  .fillInPhoneBox ul li {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c5c5c5;
    font-size: 30px;
  }

  .fillInPhone-arrow {
    width: 30px;
    height: 30px;
    border: 4px solid #dcdcdc;
    display: inline-block;
    transform: rotate(45deg);
    border-bottom: none;
    border-left: none;
    vertical-align: middle;
    margin-right: 10px;
  }

  .select-state {
    line-height: 70px;
  }

  .input-phone {
    width: 440px;
    margin-left: 20px;
    outline: none;
    border: none;
    background: #fafafa;
  }

  .inputCode {
    width: 200px;
    margin-top: 6px;
    background: #fafafa;
    outline: none;
    border: none;
  }

  .select-state-yz {
    margin-top: 2px;
  }

  input::-webkit-input-placeholder {
    color: #b2b2b2;
    font-size: 30px;
    text-align: left;
  }

  .tip {
    width: 750px;
    text-align: center;
    color: #cc3538;
    margin-top: 50px;
  }

  .lingquBox {
    font-size: 20px;
    color: #ababab;
    margin: 5px 0 10px 20px;
  }

  .result-item-text>div {
    display: inline-block;
    vertical-align: top;
  }

  .result-item-text-right>div+div {
    margin-top: 10px;
  }

  .redOpcity {
    opacity: 0;
  }

  .countryCode {
    justify-content: space-between;
  }

  .phoneBlock {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
  }

  .phoneBlock>div {
    font-size: 30px;
  }

  .phoneBlock>input {
    width: 455px;
    padding: 12px;
    box-sizing: border-box;
    padding-left: 35px;
    font-size: 26px;
    border-radius: 10px;
    background: #f4f4f4;
    color: #bdbdbd;
  }

  .answer-button {
    width: 600px;
    height: 70px;
    background: #fe4b52;
    border-radius: 15px;
    text-align: center;
    line-height: 70px;
    color: #fff;
    margin: 0 auto;
    margin-bottom: 30px;
    font-size: 36px;
    border: 0;
    display: block;
  }

  .answer-error-wrap {
    height: 48px;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 36px;
  }

  .answer-error {
    width: 600px;
    height: 48px;
    line-height: 48px;
    background: rgba(204, 160, 161, 0.24);
    border-radius: 15px;
    color: #cc2d30;
    font-size: 32px;
    margin: 0 auto;
  }

  .answer-error i {
    font-size: 28px;
    padding: 0 10px 0 30px;
  }

  .yinsi{
    float: left;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C9161D;
    line-height: 33px;
    display: flex;
    vertical-align: middle;
  }
  .yinsi img{
    width: 24px;
    height: 24px;
    margin-right: 5px;
    margin-top: 5px;
  }
</style>
